<template>
  <a-config-provider :locale="zhCN">
    <router-view></router-view>
  </a-config-provider>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import "moment/dist/locale/zh-cn";

export default defineComponent({
  name: "App",
  components: {},
  setup() {
    return {
      zhCN,
    };
  },
});
</script>

<style lang="scss">
body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  margin: 0;
  background: rgba(0, 0, 0, 0.05) !important;

  #app {
    .scale {
      // position: absolute;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-rotate: 0;
      --tw-skew-x: 0;
      --tw-skew-y: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      transform: translateX(var(--tw-translate-x))
        translateY(var(--tw-translate-y)) rotate(var(--tw-rotate))
        skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
        scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

      transition-property: all;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
      &:hover {
        z-index: 999;
        position: relative;
        --tw-scale-x: 1.05;
        --tw-scale-y: 1.05;
      }
    }
    .svg-scale {
      transition: 0.3s ease-in-out;
      &:hover {
        cursor: pointer;
        transform: scale(1.2, 1.2);
      }
    }
  }
}
</style>
